<template>
    <CommonPage state="read" :flowId="flowId">
        <div class="app-container">
            <Tabs :active-value="status" :tabs="tabs" @change="changeTab"></Tabs>
            <Application v-if="status==1 && form" :value="form"/>
            <Handling v-if="status==2 && form" :value="form"/>
        </div>
        
    </CommonPage> 
    <!-- <div class="card-wrap flex justify-end card-padding">
        <el-button @click="cancel">返回</el-button>
    </div> -->
</template>

<script>

import Tabs from "@/components/Tabs/index.vue"
import TableCloumn from "@/views/finance/manage/tableColumn/index.vue";
import Application from "@/views/collectionManagement/litigationApplication/info/application.vue"
import Handling from "@/views/collectionManagement/litigationApplication/info/handling.vue"
import * as apis from "@/api/collectionManagement/litigationApplication.js";
import { watch } from "vue-demi";

export default {
    name: "IitigationApplicationinfo",
    components: {Tabs,TableCloumn,Application,Handling},
    dicts: [ 'progress_litigation'],
    data() {
        return {
            status:1,
            tabs: [
                {
                    label: '诉讼申请信息',
                    value: 1,
                },
                {
                    label: '诉讼处理信息',
                    value: 2,
                },
            ],
            form:{
                overdueJson:'',
                overdueVoList:[]
            },
            activeNames: ['1'],
            flowId:'2435291',
            id:''
        };
    },
    async created(){
        console.log(this.typeList,2222222)
        this.id = this.$route.query?.id
        this.getInfo()
    },
    watch:{
        form:{
            deep:true,
            handler(val){
                this.form = val 
            },
            immediate:true,
        },
        'form.overdueJson':{
            deep:true,
            handler(val){
                console.log(val,'valval')
                if(val){
                    this.form.overdueVoList = JSON.parse(val)
                }     
                console.log(this.form,'dwedwwe') 
            },
        }
    },
    methods: {
        // 返回
        cancel() {
            this.$router.push({name:'LitigationApplication'});
        },
        //tab切换
        changeTab(id){
            console.log(id,2222)
            this.status = id
        },
        getInfo(){
            apis.judicialLitigationDetails(this.id).then((res)=>{
                if(res.code==200){
                    this.form = res.data
                }   
            })
        }
      
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 10px;
    width: 70%;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
}

::v-deep .el-descriptions__header {
    margin-top: -8px !important;
    margin-bottom: 10px !important;
}
</style>
